<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            /*flex叫做我们的弹性布局 我们可以这样进行我们的布局处理*/
        }

        .box {
            width: 439px;
            overflow: hidden;
            border: 2px solid springgreen;
            position: relative;
            /*relative 相对定位 目的就是为了 让这个box下面的子元素进行偏移*/
            height: 80px;
        }

        .box > .list {
            position: absolute;
            left: 0;
            display: flex;
            align-items: center;
        }

        .list > div {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            /**/
            background: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }


    </style>
</head>
<body>
<div class="box">
    <div class="list">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<script>
    let list = document.querySelector(".list");
    let box = document.querySelector(".box");//添加给我们的box 让他具有我们的点击事件,
    //添加定时器
    let left = 0;
    list.innerHTML += list.innerHTML;//我们复制一份 防止我们进行循环那一段没有东西显得比较空白
    let timer;

    //但是这样仅仅是会进行简单的轮播处理 ，就是只会变化到 但是不会循环
    function move() {
        //我们为了这个函数可复用性 我们就写一下 包装一个函数出来就可以
        clearInterval(timer);
        timer = setInterval(function () {
            left -= 2;
            if (left === -(6 * 80 + 6 * 10)) {//由于我们一开始设置我们的list左侧为0 那么我们现在进行调整 当我们的位置定格在
                // 6*80 这个计算的是我们的6个图片的大小
                // 6*10 这个是计算的我们6个图片每个图片直接的间距是多少
                left = 0;
            }
            list.style.left = left + "px";
        }, 10)
    }


    //
    box.onmouseenter = function () {
        clearInterval(timer);
    }
    box.onmouseleave = function () {
        move();
    }


</script>
</body>

</html>